<template>
  <div>
    <p>{{ JSON.stringify(arr) }}</p>
  </div>
</template>

<script>
import { reactive, watchEffect } from "@vue/composition-api";

export default {
  /** setup必须返回一个Object或则一个Function*/
  /*setup(props, ctx) {
    const state = reactive([1,2,3]);
    //报错！
    //[Vue warn]: Error in data(): "Error: [vue-composition-api] "setup" must return a "Object" or a "Function", got "Array""

    return state;
  }*/

  /** 即使在setup里定时更改arr state,也不是响应式的(watchEffect只在第一次生效了,后面push这个数组都没有触发watch)
   * 然而当我们把reactive接受的由数组变更为对象,watch就生效了,
   * 说明是reactive只会将对象变成响应式数据,而arr并不会
   * */
  setup(props, ctx) {
    const arr = reactive([1, 2, 3]);
    console.log("arr:", arr); // ←原样返回了 没有增加get set撒的
    // const obj = reactive({ count: 0 });

    setInterval(() => {
      console.log("setInterval");
      arr.push(1);
      // obj.count++;
    }, 1000);

    watchEffect(() => {
      console.log("arr:", arr);
      // console.log("obj.count:", obj.count);
    });

    return {
      // x: arr.join(",")
    };
  }

  /** emmm 和vue2.x一样 改变数组索引也不会刷新视图*/
  /*setup(){
    const r = reactive({
      arr: [1, 2, 3, 4, 5]
    });

    setInterval(()=>{
      console.log("setInterval");
      r.arr.length--;
      console.log("arr:", r.arr); // ← 你会发现索引改变的确生效了, 但并没有刷新视图
    },1000)

    return {
      arr: r.arr
    }
  }*/
};
</script>

<style lang="scss" scoped></style>
